<template>
  <div class="content_warp">
    <div class="imgBox" v-if="urlDefault">
      <div
        class="_image"
        :style="{background:'url('+url+') no-repeat center center/cover'} "
        v-if="flag"
      ></div>
      <!-- :style="{background:'url('+urlDefault+') no-repeat center center/cover'}" -->
      <div class="_image" v-if="!flag">
        <div class="_image_wrap">
          <img :src="urlDefault" alt style="width: 90px; height:90px" mode="scaleToFill" />
        </div>
      </div>
    </div>
    <div class="setting" @click="navToSetting">
      <i-icon type="setup" size="24" color="#80848f" />
    </div>
    <div class="listWrap">
      <div class="loginWrap">
        <!-- <p @click="login" >点击登录</p> -->
        <button
          class="btn_confirm"
          open-type="getUserInfo"
          lang="zh_CN"
          @getuserinfo="_getSetting"
          v-if="nickName==''"
        >点击登录</button>
        <p class="btn_confirm" v-if="nickName!==''">{{nickName}}</p>
      </div>
      <div class="list_item" @click="navTo">
        <p>实名认证</p>
        <i-icon type="enter" size="18" color="#80848f" />
      </div>
      <!-- <div class="list_item">
        <p>关于我们</p>
        <i-icon type="enter" size="18" color="#80848f" />
      </div>-->
      <div class="list_item" @click="navToCopyright">
        <p>版权声明</p>
        <i-icon type="enter" size="18" color="#80848f" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  onLoad: function(options) {

    console.log(options);
    this.keys = options.inf_id;
  },
  onShow: function(options) {
    // 查看是否授权
    this._getSetting();

    this.getStorageUrl();
  },
  data() {
    return {
      flag: false, //头像显影
      url: "",
      urlDefault: "/static/images/logo.jpg",
      userInfo: {},
      nickName: "",
      openid: "",
      gender: "",
      type: "",
      currentBar: 2,
      flagNav: false, //是否认证标记
      keys: ""
    };
  },
  methods: {
    login() {
      var that = this;
      wx.login({
        //获取code
        success(res) {
          if (res.code) {
            that.$apis.getLoginCode(res.code).then(res => {
              //通过code发起网络请求  得到openid和session_key
              let obj = JSON.parse(res.msg);
              // let obj={
              //   openid:"ozL8K40WN_uzuXjukygzSfwRJTtI"
              // }
              that.openid = obj.openid;
              that.$store.commit("getOpenid", obj); //在storage中保存openid
              that.$apis.getProfileData(obj.openid).then(res => {
                // 通过openid获取个人数据
                console.log(res);
                if (res.errcode == 400) {
                  that.flagNav = false; //标识  true表示已通过验证
                }
                if (res.code == "200") {
                  that.flagNav = true; //标识  true表示已通过验证
                  console.log(that.flagNav);
                  
                  //判断数据库是否有数据返回 有  数据储存storage
                  wx.getUserInfo({
                    success: function(res) {
                      that.nickName = res.userInfo.nickName; //获取nickName
                      that.$store.commit("getNickName", res.userInfo);
                      that.flag = true; //头像控制开关
                      wx.hideLoading(); //完成停止加载
                    }
                  });
                  that.url = res.msg.saleman_avatarurl; //头像使用数据图片
                  let obj_info = {
                    wx: res.msg.saleman_wx,
                    title: res.msg.saleman_title,
                    avatarurl: res.msg.saleman_avatarurl,
                    email: res.msg.saleman_email,
                    brief: res.msg.saleman_brief,
                    type: res.msg.saleman_type
                  };
                  that.$store.commit("storageProfileData", obj_info); // 数据储存storage
                 // that.loginBack(); //转发时未进行登录   登录完成后跳转会新闻详情页
                } else {
                  wx.getUserInfo({
                    //数据库中没有个人信息数据  通过微信获取
                    success: function(res) {
                      wx.showLoading({
                        title: "加载中..."
                      });
                      that.gender = res.userInfo.gender;
                      that.url = res.userInfo.avatarUrl; //头像使用数据图片
                      that.nickName = res.userInfo.nickName; //获取nickName
                      that.flag = true; //头像
                      that.flagNav = false; //未验证标识
                      that.$store.commit("getMyData", res.userInfo); //  storage中存储个人数据信息
                      //that.loginBack(); //转发时未进行登录   登录完成后跳转会新闻详情页
                      setTimeout(() => {
                        wx.hideLoading(); //完成停止加载
                      }, 1000);
                    }
                  });
                }
              });
            });
          } else {
            console.log("登录失败！" + res.errMsg);
          }
        }
      });
    },

    _getSetting() {
      //登录鉴权
      var that = this;
      wx.getSetting({
        success: function(res) {
          if (res.authSetting["scope.userInfo"]) {
            // that.$store.commit("login");
            wx.showLoading({
              title: "加载中..."
            });
            that.login();
          }
        }
      });
    },

    getStorageUrl() {
      //切后台时获取新的storage的数据  主要用于头像获取
      let that = this;
      wx.getStorage({
        key: "userInfo",
        success: function(res) {
          that.flag = true;
          that.url = res.data.avatarurl;
          that.nickName = res.data.nickName;
          that.openid=res.data.openid
          console.log(res.data.WX);
          if (res.data.WX) {
            that.flagNav = true;
            console.log("flagNAVtrue");
            console.log(that.openid);
          }
        }
      });
    },
    loginBack() {
      //转发登录返回
      if (this.keys) {   //传过来的inf_id
        setTimeout(() => {
          wx.navigateTo({
            url: "../newsDetail/main?inf_id=" + this.keys
          });
        }, 1500);
      }
    },
    navTo() {
      if (this.flagNav) {
        wx.showToast({
          title: "已验证",
          icon: "none",
          duration: 2000
        });
      } else if (this.openid == "") {
        wx.showToast({
          title: "请先登录",
          icon: "none",
          duration: 2000
        });
      } else {
        wx.navigateTo({
          url: "../message/main"
        });
      }
    },
    navToCopyright() {
      wx.navigateTo({
        url: "../copyright/main"
      });
    },
    navToSetting() {
      if (this.openid == "" || this.flagNav == false) {
        wx.showToast({
          title: "请先登录和实名认证",
          icon: "none",
          duration: 2000
        });
      } else {
        wx.navigateTo({
          url: "../setting/main"
        });
      }
    }
  }
};
</script>

<style  lang="scss">
//   page {
//   background-color: #f90;
// }
.content_warp {
  overflow: hidden;
  // height:500px;
  position: relative;
  background-color: #fcfcfc;
  .imgBox {
    overflow: hidden;
    position: absolute;
    left: 30px;
    top: 50px;
    ._image {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      border: 2px solid #f1f1f1;
      overflow: hidden;
      ._image_wrap {
        width: 90px;
        height: 90px;
      }
    }
  }
  .setting {
    position: absolute;
    top: 10px;
    right: 0px;
    padding-right: 20px;
    width: 80px;
    height: 80px;
    text-align:end;
    line-height: 40px;
  }
  .listWrap {
    margin-top: 100px;
    background-color: #fff;

    .loginWrap {
      // background-color: #f6f6f6;
      margin-bottom: 40px;
      padding-top: 11px;
      border-top: 1px solid #f1f1f1;
      .btn_confirm {
        font: 600 14px Microsoft YaHei;
        margin: 0 auto;
        width: 80px;
        text-align: center;
        color: #333;
        padding: 5px;
        background-color: #fcfcfc;
      }
    }
    .list_item {
      border-top: 1px solid #f1f1f1;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      p {
        font: 500 14px Microsoft YaHei;
      }
    }
  }
  .tabbar {
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #fcfcfc;
    div {
      border-top: 1px solid #f1f1f1;
      padding: 5px 0;
      font-size: 14px;
      //background-color: #fff;
      width: 50%;
      flex: 1;
      text-align: center;
    }
    .iconStyle {
      color: red;
    }
  }

  // .pushOutLine_1 {
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  //   .imgBox {
  //     width: 50px;
  //     height: 50px;
  //     margin: 0;
  //   }
  //   .wordBox {
  //     :first-child {
  //       font: 600 16px Microsoft YaHei;
  //       color: #333;
  //     }
  //     .btn {
  //       font: 600 16px Microsoft YaHei;
  //     }
  //   }
  // }
  // .pushOutLine_2 {
  //   margin-top: 30px;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  //   .btn_cancle {
  //     padding: 5px;
  //     background-color: #f90;
  //     margin-left: 20px;
  //   }
  //   .btn_confirm {
  //     background-color: #f90;
  //   }
  // }
}
</style>
